<template>
    <div>
        <div class="content">
            <list class="comment-list" >
                <cell v-for="item in comments">
                    <div class="cell">
                        <div class="user">
                            <image style="width: 74px;height: 74px;border-radius:70px ;"
                                   :src="item.userpic" ></image>
                        </div>
                        <div class="comment-text">
                            <div class="zan">
                                <image style="width: 34px;height: 34px;"
                                       :src="item.liked?'http://121.42.150.64:8099/resource/img/yzan.jpg':'http://121.42.150.64:8099/resource/img/zan.jpg'" ></image><text :class="[item.liked?'liked':'unlike']">{{item.like}}</text>
                            </div>
                            <text class="name">{{item.username}}</text>
                            <text class="nr">{{item.comment}}</text>
                            <text class="time">{{item.commentAt}}</text>
                        </div>
                    </div>
                </cell>
                <loading class="loading" @loading="onloading" :display="showLoading">
                    <text class="indicator">Loading ...</text>
                </loading>
            </list>
            <div class="footer-nav">
                <input ref="input" class="input" type="text" v-model="comment" placeholder="我也说两句" />
            </div>
            <AppHeader :title="headerTitle" :showBack="true" :showPhoto="false" ></AppHeader>
        </div>
    </div>
</template>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'

    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data() {
            return {
                headerTitle:"评论",
                showLoading: 'hide',
                comments:[]
            }
        },
        created(){
            console.log('dsada');
                let self=this;
                self.getPageData();
        },
        methods: {
            getPageData(){
                let self=this;
                self.request({
                    url:"/data/comments.json"
                }).then(res=>{
                    if(res.status==1){
                        self.comments = res.data.comments;
                        self.totalComment = res.data.totalComment;
                    }
                });
            },
            onloading (event) {
                this.showLoading = 'show';
                let self=this;

                self.request({
                    url:"/data/comments-more.json"
                }).then(res=>{
                    if(res.status==1){
                        self.comments = self.comments.concat(res.data.comments);
                        this.showLoading = 'hide'

                    }
                });
            }
        }
    }
</script>

<style scoped>
    .content{
        margin-top:100px;
        margin-left: 20px;
        margin-right:20px;
    }
    .comment-list{
        flex-direction: column;
        width: 710px;
    }
    .cell{
        margin-top:30px;
        margin-bottom:20px;
        flex-direction: row;
    }
    .user{
        width: 74px;
        height: 74px;
        margin-right: 16px;
    }
    .comment-text{
        flex: 1;
        position: relative;
    }
    .zan{
        position: absolute;
        right: 20px;
        top:0;
        height: 34px;
        flex-direction: row;
    }
    .name{
        color: #42b7ff;
        font-size: 26px;
        margin-bottom: 30px;

    }
    .nr{
        font-size: 32px;
        line-height: 46px;
        color: #2e2e2e;
    }
    .time{
        font-size: 24px;
        color: #a5a5a5;
        margin-top: 28px;
    }
    .footer-nav{
        background-color: rgba(243,239,236,.95);
        height: 120px;
        bottom: 0;
        left:0;
        right:0;
        flex-direction: row;
        padding-top: 27px;
        padding-bottom: 27px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .input{
        background-color: #fff;
        width: 550px;
        border-radius: 5px;
        height: 67px;
        border: none;
        padding-left: 12px;
        font-size: 28px;
        margin-right: 8px;
        position:fixed;

    }
    .blue{
        color: #42b7ff;
        font-size: 22px;
    }
    .right{
        width: 137px;
        flex-direction: row;
        margin-top: 18px;
    }

    .loading {
        justify-content: center;
    }
   .indicator {
        color: #888888;
        font-size: 42px;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
   }

   .liked{
       color: #ff6600;font-size: 28px;
   }

   .unlike{
      color: #999999;font-size: 28px;
   }
</style>